{% extends '__base__.html' %} {% block title %}{{ blog.name }}{% endblock %} {% block content %}

<div class="row">
	<div id="left-block" class="col-md-9">
		<!-- here is the place for left side navigation -->
		<!-- including tags and follow me -->

		<div class="blog-post">
			<h1 class="blog-title"> <a href="/blog/{{ blog.id }}">{{ blog.name }}</a>
			</h1>
			<div class="blog-meta">
				<i class="fa fa-clock-o" aria-hidden="true"></i> {{ blog.created_at|datetime }} &nbsp;&nbsp;&nbsp;&nbsp; {% for t in
				blog.tag.split(',') %}
				<i class="fa fa-folder-open-o fa-fw" aria-hidden="true"></i>
				<span class="blog-tags">
                    <a href="/blogs?tag={{t}}">{{t}}
                </a></span> {% endfor %}
			</div>
			<div class="meta-seperator"></div>
			<article class="blog-content">
				{{ blog.content|safe }}
			</article>
			<div class="blog-seperator"></div>
		</div>

	</div>

	<div id="right-block" class="col-md-3 hidden-sm hidden-xs hidden-print" role="complementary">
		<!-- here is the place for blogs -->
		<nav class="right-navbar">
			<div id="right-container" class="container-fluid">
				<h3 id="whyuclick">DON'T CLICK ME!</h3>
				<div id="scareu">
					<img id="selfie" class="img-responsive img-circle" src="/static/photos/me.jpg">
					<p>&nbsp;&nbsp;Oh,gosh! You scared me!</p>
				</div>
				<div class="right-nav-seperator"></div>
				<h3>TAGS</h3>
				<ul class="tag-list">

					{% for tag in tags %}
					<li class="tag-item">
						<i class="fa fa-folder-open-o fa-fw" aria-hidden="true"></i>
						<a href="/blogs?tag={{ tag.name}}"> {{tag.name}}</a>
					</li>
					{% endfor %}
				</ul>
				<div class="right-nav-seperator"></div>
			</div>
		</nav>
	</div>

	<!--PC和WAP自适应版-->
	<div id="SOHUCS" sid="rxjhfmfBlog_Blog_{{blog.id}}"></div>
	<script type="text/javascript">
        (function () {
            var appid = 'cysyRllTe';
            var conf = 'prod_ad1405126a45a4669efaffee7f55800d';
            var width = window.innerWidth || document.documentElement.clientWidth;
            if (width < 960) {
                window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="http://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>');
            } else {
                var loadJs = function (d, a) {
                    var c = document.getElementsByTagName("head")[0] || document.head || document.documentElement;
                    var b = document.createElement("script");
                    b.setAttribute("type", "text/javascript");
                    b.setAttribute("charset", "UTF-8");
                    b.setAttribute("src", d);
                    if (typeof a === "function") {
                        if (window.attachEvent) {
                            b.onreadystatechange = function () {
                                var e = b.readyState;
                                if (e === "loaded" || e === "complete") {
                                    b.onreadystatechange = null;
                                    a()
                                }
                            }
                        } else {
                            b.onload = a
                        }
                    }
                    c.appendChild(b)
                };
                loadJs("http://changyan.sohu.com/upload/changyan.js", function () {
                    window.changyan.api.config({appid: appid, conf: conf})
                });
            }
        })(); 
        </script> {% endblock %} {% block script %}
	<script>
        <!-- put script here -->
        $(document).ready(function () {
            $('#whyuclick').click(function () {
                $('#scareu').toggle(3000);
            });
        });
    </script>

	<script type="text/javascript">
    navactive = document.getElementById("blogs")
    navactive.className = "active"
    
</script> {% endblock %}